<template>
	<view :class="currentTheme">
		<a-nabbar :name="title" />
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-position-relative">
				<u-swiper :list="bannerList" height="290" border-radius="0" mode="dot"></u-swiper>
			</view>
			<view class="user">
				<view class="u-position-absolute left-avatar u-flex">
					<item-image :type="'1'" :img="issueAvatar" :size="150" />
					<view class="u-margin-left-20 u-font-36 box-title">{{title}}</view>
				</view>
				<view class="fans" @click.stop="fansDetail">ta的粉丝团 {{fansGroupCount || 0}}</view>
				<u-collapse>
					<u-collapse-item title=" ">
						<view class=" phone">
							<view class="u-flex" @click="goIphone(phone)">
								<u-icon name="dianhua" custom-prefix="custom-icon" color="#765cfe" size="24"></u-icon>
								<text class="u-font-24 text-order-time">{{phone || ''}}</text>
							</view>
							<view class="u-flex">
								<u-icon name="weizhi" custom-prefix="custom-icon" color="#765cfe" size="24"></u-icon>
								<text class="u-font-24 text-order-time">{{address  || ''}}</text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class=" u-padding-left-32 u-padding-right-32 list-view">
				<view v-for="(item,index) in dataList" :key="index" class="u-margin-top-20">
					<list-item :item="item" :showDelete="false" :isShare="false" productIdStr="productId" :showTime="false"
						:user="false">
						<view slot="footer-start">
							<view class="text-color-9598a4 u-font-20 u-margin-top-20">
								<text class="item-content-width">活动价：￥{{item.exhibitPrice}}</text>
								<text>销量：{{item.sales||0}}</text>
							</view>
							<view class="text-color-9598a4 u-font-20 u-margin-top-20">
								<text class="item-content-width">售价：￥{{item.price}}</text>
								<text>库存：{{item.stock||0}}</text>
							</view>
						</view>
						<view slot="footer-end" class="u-flex u-margin-top-20" v-if="!isDM&&!isIssue">
							<view class="btn-style add-car" @click.stop="addCar(item)">加入购物车</view>
							<view class="btn-style buy" @click.stop="buy(item)">购买</view>
							
						</view>
						<view slot="end">
							<view class="u-flex u-margin-top-26">
								<view class="u-flex u-flex-1">
									<item-image type="1" :img="item.avatar" :size="42" :fade="false" />
									<text class="text-bold u-font-28 content-desc-item u-margin-left-8 u-line-1 username-text">{{item.createName || '' }}</text>
								</view>
								<view class="u-flex u-flex-1">
									<view class="u-flex text-tips">
										<!-- <u-image src="/static/images/read.png" width="32" height="32" :lazy-load="false"
											:show-loading="false" :fade="false"></u-image> -->
										<u-icon  name="chakan" size="30" custom-prefix="index-custom-icon"></u-icon>
										<text class="u-font-20 u-margin-left-10">{{item.browse || 0}}</text>
									</view>
									<view class="u-flex u-margin-left-36" @click.stop="unlike(item)">
										<u-icon :name="item.isLike===0?'weidianzan':'dianzan1'" size="32"
											:color="item.isLike===0?'#999999':'#FF8DC3'" custom-prefix="custom-icon">
										</u-icon>
										<text class="u-font-20 u-margin-left-10">{{item.likeNum || 0}}</text>
									</view>
								</view>
								<view class="u-flex u-flex-1 u-row-right">
									<view class="u-font-22 text-order-time">
										{{item.playNum || 0}}位玩家想玩
									</view>
								</view>
								<!-- <view class="u-flex" v-if="showFooterRight">
									<view class="u-flex u-margin-right-14">
										<u-image src="/static/images/read.png" width="32" height="32" :lazy-load="false"
											:show-loading="false" :fade="false"></u-image>
										<text
											class="u-font-20 text-color-765CFE u-margin-left-10">{{data.browse || 0}}</text>
									</view>
									<view class="u-flex" v-if="showFooterRightStar" @click.stop="unlike">
										<u-icon :name="data.isLike===0?'weidianzan':'dianzan1'" size="32"
											:color="data.isLike===0?'#999999':'#FF8DC3'" custom-prefix="custom-icon">
										</u-icon>
										<text class="u-font-20 text-color-765CFE u-margin-left-10">{{likeNum || 0}}</text>
									</view>
								</view> -->
							</view>
						</view>
					</list-item>
				</view>
			</view>
		</mescroll-body>
		<fixed-team btnText="私聊Ta" @btnClick="chat" v-if="loginForm.uid"></fixed-team>
		<model v-model="likeFlag" :show-title="false" show-cancel-button  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			@confirm="setcollection" content="是否取消点赞？" />
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import model from '@/components/u-modal/u-modal.vue'
	import {
		deleteIds,
		getDetail,
		add
	} from '@/api/crud.js'
	import settlement from '@/mixins/settlement.js'
	import {customRequest} from '@/api/crud.js'
	export default {
		components: {
			model
		},
		mixins: [upCallback, settlement],
		data() {
			return {
				apiModule: 'shopApi',
				form: {
					types: '',
					creatorId: ''
				},
				title: '发行详情',
				apiType: 'mallProduct',
				name: 'thirdQuery',
				issueAvatar: '',
				fansGroupCount: '',
				username: "",
				phone: "",
				address: "",
				option: {},
				activeItem:{},
				likeFlag:false
			}
		},
		computed: {
			bannerList() {
				const list = this.dataList.map(val => this.imgFilter(val.image))
				return list
			},
			isDM() {
				return this.loginForm.clerkRole === 'DM'
			},
			isIssue(){
				return this.loginForm.userType ==='issue'
			}
		},
		onLoad(option) {
			this.option = option
		},
		onShow() {
			this.issueUser(this.option)
		},
		methods: {
			//加载发行信息
			issueUser(option) {
				this.uid = option.uid;
				this.form.creatorId = option.uid
				getDetail('', 'product', this.apiModule, `findIssueDetailByUid/${this.uid}`).then(({
					phone,
					address,
					issueName,
					sliderImage,
					issueAvatar,
					hxUsername,
					fansGroupCount
				}) => {
					this.title = issueName;
					// this.bannerList = sliderImage.map(this.imgFilter);
					this.issueAvatar = issueAvatar
					this.username = hxUsername
					this.phone = phone
					this.address = address
					this.fansGroupCount = fansGroupCount
				})
			},
			//跳转发行粉丝团
			fansDetail(item) {
				this.$u.route({
					url: '/pagesA/fans/index',
					params: {
						uid: this.uid,
						userType: 'issue',
					}
				})
			},
			goPathDetail({
				id
			}) {
				this.$u.route({
					url: '/pagesA/itemDetail/goodsDetail',
					params: {
						id
					}
				})
			},
			//添加到购物车
			addCar(item) {
				this.loginValidate().then(res => {
					add({
						productId: item.productId,
						uid: this.loginForm.uid,
						cartNum: 1,
						mallProductId: item.id,
						type: 'script'
					}, 'cart', this.apiModule).then(res => {
						this.$u.toast('添加成功')
					})
				})
			},
			buy(item) {
				this.loginValidate().then(res => {
					this.settlement([{
						productId: item.productId,
						mallProductId: item.mallProductId,
						productNum: 1
					}])
				})
			},
			chat() {
				if (!this.username) {
					this.$u.toast('暂时无法私聊')
					return false;
				}
				this.$u.route({
					url: '/pages/chat/chat',
					params: {
						type: 'singleChat',
						name: this.title,
						id: this.username,
					}
				})
			},
			//点赞
			setcollection() {
				if (!this.loginForm.uid) {
					this.$u.toast('您还没有登录')
					return false;
				}
				const isLike = this.setLikeFlag()
				this.$u.toast((!isLike ? '取消' : '') + '点赞成功') //先操作数据再查看是否成功 如果成功就不管了 如果不成功就恢复原数据
				const obj = {
					productId: this.activeItem.productId,
					uid: this.loginForm.uid,
					type: 'like',
					collectNum: 1,
					category: 0,
					mallProductId:this.activeItem.id
				}
				customRequest(obj, 'storeProductRelation', this.apiModule, 'mallCollection', 'post').catch(this
					.setLikeFlag)
			},
			setLikeFlag() {
				const isLike = this.activeItem.isLike == 1 ? 0 : 1;
				this.$set(this.activeItem, 'isLike', isLike)
				const num = isLike == 1 ? ++this.activeItem.likeNum : --this.activeItem.likeNum;
				this.$set(this.activeItem, 'likeNum', num)
				return isLike
			},
			unlike(item) {
				const likeFlag = item.isLike === 1;
				this.activeItem = item;
				this.likeFlag = likeFlag;
				if (likeFlag) {
					console.log(111)
					// this.$emit("unLike", this.productId);
					return false;
				} //首页
				if (!likeFlag) this.setcollection()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.fans {
		padding: 0 8rpx;
		height: 32rpx;
		background: rgba(118, 92, 254, 0.2);
		border-radius: 6rpx;
		text-align: center;
		line-height: 32rpx;
		position: absolute;
		font-size: 24rpx;
		color: #765CFE;
		left: 200rpx;
		top: 70rpx;
		z-index: 100;
	}

	.btn-style {
		border-radius: 50rpx;
		line-height: 64rpx;
		width: 190rpx;
		text-align: center;
		font-size: 24rpx;

		&.buy {
			color: white;
			background-color: $primary;
			margin: 0 5rpx;
		}

		&.add-car {
			margin-right: 20rpx;
			color: #1F1B34;
			background-color: var(--background-second-color);
		}
	}

	.list-view {
		margin-top: 35rpx;
	}

	.left-avatar {
		left: 34rpx;
		top: -44rpx;
		text-align: center;
		color: #ECECEC;
		font-size: 36rpx;
		z-index: 10;
	}

	.top {
		right: 32rpx;
	}

	.empty-view {
		height: 200rpx;
	}
	.chat {
		width: 100%;
		line-height: 40px;
	}

	.item-content-width {
		display: inline-block;
		width: 150rpx;
	}

	.user {
		background: white;
		width: 100%;
		position: relative;
	}

	/deep/.u-collapse-item {
		padding-top: 104rpx;

		.u-collapse-body {
			padding-left: 32rpx;
		}
	}

	.phone {
		bottom: 2rpx;
		left: 34rpx;

		>view {
			margin-bottom: 37rpx;

			text {
				margin-left: 17rpx;
				font-size: 24rpx;
				color: #9A9A9A;
			}
		}
	}
</style>
